<template>
	<view class="userInfo">
		<view class="userBox">
			<view class="label">姓名</view>
			<view class="inputOut">
				<input type="text" value="" placeholder="请输入姓名" placeholder-class="places" v-model="userInfo.name"/>
			</view>
			<view class="label">手机号</view>
			<view class="inputOut">
				<input type="number" value="" placeholder="请输入手机号" placeholder-class="places" v-model="userInfo.phoneNumber"/>
				<view class="codeBtn" @tap="startTime()">{{codeBtn}}</view>
			</view>
			<view class="label">验证码</view>
			<view class="inputOut" style="border-bottom: 0;">
				<input type="text" value="" placeholder="请输入验证码" 
				placeholder-class="places" v-model="userInfo.capCode"/>
			</view>
		</view>
		<view class="infoBox">请核实个人信息</view>
		<button class="blueBtn" @tap="submit()" :disabled="disabled">确认提交</button>
	</view>
</template>

<script>
	import {sendCode, setInfo} from './js/api.js'
	export default{
		data () {
			return {
				codeBtn: '获取验证码',
				timeStop: '',
				phone: '',
				userInfo: {
					unionid: uni.getStorageSync('unionid')
				},
				disabled: false
			}
		},
		methods:{
			toast (name) {
				uni.showToast({
					title: name,
					icon: 'none',
					duration: 2000
				})
			},
			// 倒计时
			startTime () {
				let reg =/^1\d{10}$/
				if (!reg.test(this.userInfo.phoneNumber)){
					this.toast('请输入正确的手机号')
					return
				}
				if (this.codeBtn.indexOf('s后获取') !== -1) {
					return
				}
				let timeo = 60
				this.timeStop = setInterval(() => {
					timeo--
					if (timeo > 0) {
						this.codeBtn = timeo + 's后获取'
					} else {
						// timeo = 60 // 当减到0时赋值为60
						this.codeBtn = '重新获取'
						clearInterval(this.timeStop) // 清除定时器
					}
				}, 1000)
				this.sendCode()
			},
			// 验证码获取
			sendCode () {
				let params = {
					phoneNumber: this.userInfo.phoneNumber
				}
				sendCode(params).then(res => {
					console.log(res)
				}) 
			},
			// 提交表单
			submit () {
				if (this.userInfo.name === '') {
					this.toast('请输入姓名')
					return
				}
				let reg =/^1\d{10}$/
				if (!reg.test(this.userInfo.phoneNumber)){
					this.toast('请输入正确的手机号')
					return
				}
				if (this.userInfo.capCode === '') {
					this.toast('请输入验证码')
					return
				}
				this.disabled = true
				setInfo(this.userInfo).then((res) => {
					console.log(res)
					if (res.code != 200) {
						this.toast(res.msg)
					} else {
						uni.setStorageSync('info', res.data)
						uni.redirectTo({
							url: './realInfo'
						})
					}
					this.disabled = false
				})
			}
		}
	}
</script>

<style lang="scss">
	.userInfo{
		.userBox{
			margin: 30rpx auto 0;
			width: 690rpx;
			height: 440rpx;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 20rpx 0px rgba(102, 102, 102, 0.3);
			border-radius: 10rpx;
			overflow: hidden;
			.label{
				width: calc(100% - 60rpx);
				margin: 28rpx auto 0;
				text-align: left;
				color: #333333;
				font-size: 26rpx;
				// font-weight: 500;
			}
			.inputOut{
				width: calc(100% - 60rpx);
				height: 60rpx;
				border-bottom: 1rpx solid #EEEEEE;
				margin: 15rpx auto 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.places{
					line-height: 60rpx;
					// height: 30;
					color: #999999;
					font-size: 30rpx;
				}
				.codeBtn{
					width: 180rpx;
					text-align: right;
					color: #2DBDA2;
					font-size: 26rpx;
					font-weight: 500;
					position: relative;
					line-height: 34rpx;
					
				}
				.codeBtn::before{
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					width: 1rpx;
					height: 34rpx;
					// background-color: #DDDDDD;
					border-left: 1rpx solid #DDDDDD;
				}
			}
		}
		.infoBox{
			width: calc(100% - 60rpx);
			margin-left: 60rpx;
			text-align: left;
			color: #999999;
			font-size: 26rpx;
			margin-top: 20rpx;
		}
		.blueBtn{
			width: 690rpx;
			height: 90rpx;
			background: #2DBDA2;
			border-radius: 10rpx;
			text-align: center;
			line-height: 90rpx;
			color: #FFFFFF;
			font-size: 34rpx;
			margin-top: 60rpx;
		}
	}
</style>
